<template>
    <div class="page roadIn">
        <sysHeader :active="'5'"></sysHeader>
        <div class="keySearch_l_t">
            <div class="keySearch_l_t_header">
                违规统计
            </div>
            <div class="keySearch_l_t_body">
                <div class="keySearch_l_t_tb_h"></div>
                <div class="keySearch_l_t_tb_b"></div>
                <div class="common_table_head">
                    <el-row>
                        <el-col :span="8">
                            <div class="common_cell">违规类型</div>
                        </el-col>
                        <el-col :span="8">
                            <div class="common_cell">总违规数</div>
                        </el-col>
                        <el-col :span="8">
                            <div class="common_cell">已处理违规数</div>
                        </el-col>
                    </el-row>
                </div>
                <div class="common_table_body" style="color:#fff;">
                    <vue-seamless-scroll :data="tableData" class="seamless-warp" :class-option="classOption">
                        <div class="common_row" v-for="(item,index) in tableData" :key="index">
                            <el-row>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.Violation_type}}</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.Violation_num}}</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.dealwith_num}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="keySearch_l_c">
            <div class="keySearch_l_c_header">
                运管员违规
            </div>
            <div class="keySearch_l_c_body">
                <div class="keySearch_l_c_tb_h"></div>
                <div class="keySearch_l_c_tb_b"></div>
                <div class="common_table_head">
                    <el-row>
                        <el-col :span="8">
                            <div class="common_cell">运管员名称</div>
                        </el-col>
                        <el-col :span="8">
                            <div class="common_cell">所属道路</div>
                        </el-col>
                        <el-col :span="8">
                            <div class="common_cell">违规类型</div>
                        </el-col>
                    </el-row>
                </div>
                <div class="common_table_body" style="color:#fff;">
                    <vue-seamless-scroll :data="tableData1" class="seamless-warp" :class-option="classOption">
                        <div class="common_row" v-for="(item,index) in tableData1" :key="index">
                            <el-row>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.admin_name}}</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.street_name}}</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.valation_type}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>

        <div class="keySearch_l_b">
            <div class="keySearch_l_b_header">
                巡查联动
            </div>
            <div class="keySearch_l_b_body">
                <div class="keySearch_l_b_box">
                    <el-row>
                        <el-col :span="12">
                            <div class="keySearch_l_b_item">
                                <div class="keySearch_l_b_title">民警现场处罚</div>
                                <div class="keySearch_l_b_num">
                                    <DigitRoll :rollDigits="tongji.mjxccf" />
                                </div>
                                <div class="keySearch_l_b_label">辆</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="keySearch_l_b_item">
                                <div class="keySearch_l_b_title">交通协管员和停车协管员等贴条</div>
                                <div class="keySearch_l_b_num">
                                    <DigitRoll :rollDigits="tongji.jtxgyhtcxgydtt" />
                                </div>
                                <div class="keySearch_l_b_label">辆</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="keySearch_l_b_item">
                                <div class="keySearch_l_b_title">违规抓拍探头取证</div>
                                <div class="keySearch_l_b_num">
                                    <DigitRoll :rollDigits="tongji.wgzpttqz" />
                                </div>
                                <div class="keySearch_l_b_label">辆</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="keySearch_l_b_item">
                                <div class="keySearch_l_b_title">对违停车辆清理拖移</div>
                                <div class="keySearch_l_b_num">
                                    <DigitRoll :rollDigits="tongji.dwtclqlty" />
                                </div>
                                <div class="keySearch_l_b_label">辆</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

        <div class="keySearch_c_t">
            <div class="keySearch_c_t_body">
                <el-carousel height="526px">
                    <el-carousel-item v-for="(item,index) in imgList" :key="index" class="carousel-item">
                        <el-image
                                style="width: 935px; height: 526px"
                                :src="item.url"
                                :fit="'fill'"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <div class="keySearch_c_b">
            <div class="keySearch_c_b_header">
                失信人员
            </div>
            <div class="keySearch_c_b_body">
                <div class="keySearch_c_b_tb_h"></div>
                <div class="keySearch_c_b_tb_b"></div>
                <div class="common_table_head">
                    <el-row>
                        <el-col :span="8">
                            <div class="common_cell">姓名</div>
                        </el-col>
                        <el-col :span="8">
                            <div class="common_cell">手机号</div>
                        </el-col>
                        <el-col :span="8">
                            <div class="common_cell">失信类型</div>
                        </el-col>
                    </el-row>
                </div>
                <div class="common_table_body" style="color:#fff;">
                    <vue-seamless-scroll :data="newItems" class="seamless-warp" :class-option="classOption">
                        <div class="common_row" v-for="(item,index) in newItems" :key="index">
                            <el-row>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.name}}</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.phone}}</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="common_cell">{{item.reason}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </vue-seamless-scroll>
                </div>
<!--                <div class="keySearch_c_b_content">-->
<!--                    <marqueeLeft :sendVal='newItems'></marqueeLeft >-->
<!--                </div>-->
            </div>
        </div>

        <div class="keySearch_r_t">
            <div class="keySearch_r_t_header">
                12345投诉热点
            </div>
            <div class="keySearch_r_t_box">
                <div class="keySearch_r_t_icon"></div>
                <div class="keySearch_r_t_num" v-if="tongji.tousu">
                    <DigitRoll :rollDigits="tongji.tousu" />
                </div>
                <div class="keySearch_r_t_num_label">起</div>
                <div class="keySearch_r_t_label">投诉量</div>
            </div>
            <div class="keySearch_r_t_body">
                <sysChart :options="rightTopOptions" :echart_height="'300px'"></sysChart>
            </div>
        </div>

        <div class="keySearch_r_c">
            <div class="keySearch_r_c_header">
                投诉类型分析
            </div>
            <div class="keySearch_r_c_body">
                <sysChart :options="rightCenterOptions" :echart_height="'200px'"></sysChart>
            </div>
        </div>

        <div class="keySearch_r_b">
            <div class="common_head">
                <div class="common_item active" style="cursor: pointer;">
                    <div class="common_item_bg_l"></div>
                    <div class="common_item_bg_c"></div>
                    <div class="common_item_bg_r"></div>
                    <div class="common_item_title" style="padding-left:29px">各区投诉排名</div>
                </div>
                <div class="common_head_bg"></div>
                <div class="common_head_bg_r"></div>
            </div>
            <div class="keySearch_r_b_body">
                <div class="keySearch_r_b_tb_h"></div>
                <div class="keySearch_r_b_tb_b"></div>
                <div class="common_table_head">
                    <el-row>
                        <el-col :span="12">
                            <div class="common_cell">区域名称</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="common_cell">投诉量</div>
                        </el-col>
                    </el-row>
                </div>
                <div class="common_table_body" style="color:#fff;">
                    <vue-seamless-scroll :data="tableData2" class="seamless-warp" :class-option="classOption">
                        <div class="common_row" v-for="(item,index) in tableData2" :key="index">
                            <el-row>
                                <el-col :span="12">
                                    <div class="common_cell">{{item.region_name}}</div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="common_cell">{{item.num}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import sysHeader from '@/components/common/sysHeader.vue'
    import sysChart from '@/components/common/sysChart.vue'
    import marqueeLeft from '@/components/common/marqueeLeft.vue'
    import DigitRoll from '@huoyu/vue-digitroll';
    import config from '@/api/config.js'
    import util from '@/utils/util.js'
    import vueSeamlessScroll from 'vue-seamless-scroll'

    export default {
        name: "keySearch",
        data() {
            return {
                tongji: {
                    mjxccf: 0,
                    jtxgyhtcxgydtt: 0,
                    wgzpttqz: 0,
                    dwtclqlty: 0,
                    tousu: 0
                },
                imgList: [],
                newItems: [],
                rightTopOptions: {
                    grid:{
                        bottom:50,
                        top:135
                    },
                    legend: {
                        right:60,
                        top:30,
                        orient: 'vertical',
                        textStyle:{
                            color:'#fff',
                            lineHeight:30,
                            fontSize:14,
                            fontWeight: 'bold'
                        },
                        data: ['12345', '400-18-999-18']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['服务满意度', '处理结果满意度'],
                            axisLabel:{
                                color: '#ffffff',
                                fontSize:14,
                                fontWeight: 'bold',
                                lineHeight: 20
                            },
                            axisTick: {show:false},
                            axisLine: {
                                show:true,
                                lineStyle:{
                                    color: '#397BA0'
                                }
                            },
                            z:2
                        },{
                            type: 'category',
                            data: ['', ''],
                            axisLabel:{
                                inside:true,
                                color: '#ffffff',
                                fontSize: 14,
                                fontWeight: 'bold',
                                lineHeight: 20
                            },
                            z:2,
                            position: 'bottom',
                            axisTick: {show:false},
                            axisLine: {
                                show:false,
                                lineStyle:{
                                    color: '#397BA0'
                                }
                            }
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel:{show: false},
                            splitLine:{show:false},
                            axisTick: {show:false},
                            axisLine: {
                                show:false
                            }
                        }
                    ],
                    color: ['#3473FE','#4DBA92'],
                    series: [
                        {
                            name: '12345',
                            type: 'bar',
                            label:{
                                show: true,
                                color: '#ffffff',
                                fontSize: 14,
                                fontWeight: 'bold',
                                position: 'top'
                            },
                            data: [{
                                name: '2月',
                                value: '7'
                            }, {
                                name: '2月',
                                value: '1'
                            }]
                        },
                        {
                            name: '12345',
                            type: 'bar',
                            data: [{
                                name: '3月',
                                value: '3'
                            }, {
                                name: '3月',
                                value: '4'
                            }],
                            label:{
                                show: true,
                                color: '#ffffff',
                                fontSize: 14,
                                fontWeight: 'bold',
                                position: 'top',
                            },
                        },
                        {
                            name: '400-18-999-18',
                            type: 'bar',
                            label:{
                                show: true,
                                color: '#ffffff',
                                fontSize: 14,
                                fontWeight: 'bold',
                                position: 'top'
                            },
                            data: [{
                                name: '3月',
                                value: '5'
                            }, {
                                name: '3月',
                                value: '6'
                            }],
                        },
                        {
                            name: '12345',
                            type: 'bar',
                            label:{
                                show: true,
                                color: '#fff',
                                fontSize: 14,
                                fontWeight: 'bold',
                                formatter:function(param){
                                    return param.data.name
                                },
                                position: 'inside'
                            },
                            data: [{
                                name: '2月',
                                value: '7'
                            }, {
                                name: '2月',
                                value: '1'
                            }],
                            xAxisIndex:1
                        },
                        {
                            name: '12345',
                            type: 'bar',
                            data: [{
                                name: '3月',
                                value: '3'
                            }, {
                                name: '3月',
                                value: '4'
                            }],
                            label:{
                                show: true,
                                fontSize: 14,
                                fontWeight: 'bold',
                                formatter:function(param){
                                    return param.data.name
                                },
                                color: '#fff',
                                position: 'inside'
                            },
                            xAxisIndex:1
                        },
                        {
                            name: '400-18-999-18',
                            type: 'bar',
                            label:{
                                show: true,
                                color: '#fff',
                                fontSize: 14,
                                fontWeight: 'bold',
                                formatter:function(param){
                                    return param.data.name
                                },
                                position: 'inside'
                            },
                            data: [{
                                name: '3月',
                                value: '5'
                            }, {
                                name: '3月',
                                value: '6'
                            }],
                            xAxisIndex:1
                        }
                    ]
                },
                rightCenterOptions:{
                    angleAxis: {
                        show:false,
                        max:8
                    },
                    tooltip:{},
                    radiusAxis: [{
                        type: 'category',
                        data: ['投诉类型分析'],
                        z: 10,
                        show:false,
                    }],
                    color:['#4153C8','#CC4BB6','#E95F70','#5289C9','#CCB33A','#65D5BC'],
                    polar: {
                        center:['45%','50%'],
                        radius: '80%'
                    },
                    series: [],
                    legend: {
                        show: true,
                        textStyle:{
                            color:'#fff',
                            fontSize: 14,
                            fontWeight: 'bold'
                        },
                        right:30,
                        y:'center',
                        orient: 'vertical',
                        data: ['乱收费','刮擦','停车位不足','服务态度差','乱停车','设备故障']
                    }
                },
                rightInterval: undefined,
                leftInterval: undefined,
                leftInterval1: undefined,
                tableData2: [],
                tableData: [],
                tableData1: []
            }
        },
        components: {
            sysHeader,
            marqueeLeft,
            sysChart,
            vueSeamlessScroll,
            DigitRoll
        },
        computed: {
            classOption () {
                return util.classOption
            }
        },
        watch: {},
        mounted() {
            this.getRightBottom()
            this.getLeftTop()
            this.getLeftCenter()
            this.getLeftBottom()
            this.getCenterBottom()
            this.getRightTop()
            this.getRightCenter()
            this.getCenterImg()
        },
        methods: {
            getCenterImg() {
                this.$api.get(config.basePath+'park/index/getHotspotImg', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.imgList = data
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getRightBottom() {
                this.$api.get(config.basePath+'park/index/HotSpotList', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.tableData2 = [].concat(...data).concat(...data)
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getLeftTop() {
                this.$api.get(config.basePath+'park/index/ViolationOfStatistics', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.tableData = [].concat(...data).concat(...data)
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getLeftCenter() {
                this.$api.get(config.basePath+'park/index/getAdminValationList', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.tableData1 = [].concat(...data).concat(...data)
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getLeftBottom() {
                this.$api.get(config.basePath+'park/index/searchInfo', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        data.forEach(item => {
                            if(item.name === '民警现场处罚'){
                                this.tongji.mjxccf = item.num
                            }
                            if(item.name === '交通协管员和停车协管员等贴条'){
                                this.tongji.jtxgyhtcxgydtt = item.num
                            }
                            if(item.name === '违规抓拍探头取证'){
                                this.tongji.wgzpttqz = item.num
                            }
                            if(item.name === '对未停车车辆清理拖移'){
                                this.tongji.dwtclqlty = item.num
                            }
                        })
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getCenterBottom() {
                this.$api.get(config.basePath+'park/index/dishonest', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.newItems = [].concat(...data).concat(...data)
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getRightTop() {
                this.$api.get(config.basePath+'park/index/complaint', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        this.tongji.tousu = data.num
                        /*
                        const newData = {
                            service: {
                                400:{name:'3',value:1100},
                                first:{name:'2',value:1100},
                                second:{name:'3',value:1100}
                            },
                            deal_width: {
                                400:{name:'3',value:1100},
                                first:{name:'2',value:1100},
                                second:{name:'3',value:1100}
                            }
                        }*/
                        const newData = data
                        this.rightTopOptions.series[0].data[0].name = newData.service.first.name+'月'
                        this.rightTopOptions.series[0].data[0].value = newData.service.first.value

                        this.rightTopOptions.series[3].data[0].name = newData.service.first.name+'月'
                        this.rightTopOptions.series[3].data[0].value = newData.service.first.value

                        this.rightTopOptions.series[0].data[1].name = newData.deal_width.first.name+'月'
                        this.rightTopOptions.series[0].data[1].value = newData.deal_width.first.value

                        this.rightTopOptions.series[3].data[1].name = newData.deal_width.first.name+'月'
                        this.rightTopOptions.series[3].data[1].value = newData.deal_width.first.value


                        this.rightTopOptions.series[1].data[0].name = newData.service.second.name+'月'
                        this.rightTopOptions.series[1].data[0].value = newData.service.second.value

                        this.rightTopOptions.series[4].data[0].name = newData.service.second.name+'月'
                        this.rightTopOptions.series[4].data[0].value = newData.service.second.value

                        this.rightTopOptions.series[1].data[1].name = newData.deal_width.second.name+'月'
                        this.rightTopOptions.series[1].data[1].value = newData.deal_width.second.value

                        this.rightTopOptions.series[4].data[1].name = newData.deal_width.second.name+'月'
                        this.rightTopOptions.series[4].data[1].value = newData.deal_width.second.value


                        this.rightTopOptions.series[2].data[0].name = newData.service[400].name+'月'
                        this.rightTopOptions.series[2].data[0].value = newData.service[400].value

                        this.rightTopOptions.series[5].data[0].name = newData.service[400].name+'月'
                        this.rightTopOptions.series[5].data[0].value = newData.service[400].value

                        this.rightTopOptions.series[2].data[1].name = newData.deal_width[400].name+'月'
                        this.rightTopOptions.series[2].data[1].value = newData.deal_width[400].value

                        this.rightTopOptions.series[5].data[1].name = newData.deal_width[400].name+'月'
                        this.rightTopOptions.series[5].data[1].value = newData.deal_width[400].value

                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            getRightCenter() {
                this.$api.get(config.basePath+'park/index/complaintType', {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        const data = response.data.data
                        const list = data.sort((a,b)=>{
                            return parseInt(a.num)- parseInt(b.num)
                        })
                        let max = 0
                        const legend = []
                        list.forEach(item => {
                            if(max<parseInt(item.num)){
                                max = parseInt(item.num)
                            }
                            legend.push(item.type)
                        })
                        this.rightCenterOptions.legend.data = legend
                        max = Math.floor(max+max/3)
                        this.rightCenterOptions.angleAxis.max = max
                        this.rightCenterOptions.series = list.map(item => {
                            return {
                                type: 'bar',
                                data: [item.num],
                                coordinateSystem: 'polar',
                                name: item.type
                            }
                        })
                        //console.log(response);
                    } else {
                        //console.log(response.message);
                    }
                });
            },
            changeTable(data) {
                data.push(data[0]);//把第一条数据插入数组最有一条
                data.shift();//删除数组中第一条数据
            },
            playLeftTable(){
                if (this.leftInterval) {
                    clearInterval(this.leftInterval)
                }
                this.leftInterval = setInterval(() => {
                    this.changeTable(this.tableData)
                }, 8000);//每两秒执行一次插入删除操作
            },
            playLeftTable1(){
                if (this.leftInterval1) {
                    clearInterval(this.leftInterval1)
                }
                this.leftInterval1 = setInterval(() => {
                    this.changeTable(this.tableData1)
                }, 8000);//每两秒执行一次插入删除操作
            },
            playRightTable(){
                if (this.rightInterval) {
                    clearInterval(this.rightInterval)
                }
                this.rightInterval = setInterval(() => {
                    this.changeTable(this.tableData2)
                }, 8000);//每两秒执行一次插入删除操作
            },

        }
    }
</script>

<style scoped>
    .keySearch_l_t_body .common_table_head,
    .keySearch_l_c_body .common_table_head,
    .keySearch_c_b_body .common_table_head,
    .keySearch_r_b_body .common_table_head{
        height:48px;
        line-height: 48px;
        font-size:18px;
    }
    .keySearch_l_t_body .common_table_body,
    .keySearch_l_c_body .common_table_body,
    .keySearch_c_b_body .common_table_body,
    .keySearch_r_b_body .common_table_body{
        top:48px;
    }
    .keySearch_l_t_body .common_table_body .common_row,
    .keySearch_l_c_body .common_table_body .common_row,
    .keySearch_c_b_body .common_table_body .common_row,
    .keySearch_r_b_body .common_table_body .common_row{
        height:48px;
        line-height: 48px;
    }
    .keySearch_c_b_tb_b{
        position:absolute;
        left:0;
        top:48px;
        right:0;
        bottom:0;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .keySearch_r_b_tb_b{
        position:absolute;
        left:0;
        top:48px;
        right:0;
        bottom:0;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .keySearch_r_b_tb_h{
        width:454px;
        height:48px;
        background:linear-gradient(90deg,rgba(0,45,103,1) 0%,rgba(5,16,42,1) 100%);
        border:1px solid rgba(27,158,234,1);
        position:absolute;
        top:0;
        left:0;
    }
    .keySearch_r_b_body{
        position:relative;
        clear: both;
        margin-top:-1px;
        height:288px;
        overflow: hidden;
    }
    .keySearch_r_c_header{
        position:absolute;
        left:16px;
        top:16px;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:24px;
    }
    .keySearch_r_t_body{
        width:450px;
        position:absolute;
        right:10px;
        bottom:0;
        height:300px;
    }
    .keySearch_r_t_icon{
        position:absolute;
        left:24px;
        top:24px;
        width:48px;
        height:48px;
        background-image: url("~@/assets/images/safe_icon.png");
        background-repeat: no-repeat;
        background-size: 48px 48px;
        background-position:0 0;

    }
    .keySearch_r_t_num{
        position:absolute;
        left: 100px;
        top: 15px;
        width:55px;
        font-size:24px;
        font-weight: bold;
        font-family:DINAlternate-Bold,DINAlternate;
        color:rgba(255,255,255,1);
        line-height:28px;
    }
    .keySearch_r_t_num .d-roll-wrapper{
        margin:0 auto;
    }
    .keySearch_r_t_num_label{
        position:absolute;
        top:31px;
        right:28px;
        font-size:14px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:rgba(255,255,255,1);
        line-height:18px;
    }
    .keySearch_r_t_label{
        position:absolute;
        bottom:17px;
        text-align: center;
        left:74px;
        right:0;
        font-size:14px;
        font-family:SourceHanSansSC-Medium,SourceHanSansSC;
        font-weight:bold;
        color:#32FFB4;
        line-height:18px;
    }
    .keySearch_r_t_box{
        position:absolute;
        left:17px;
        top:63px;
        width:200px;
        height:96px;
        background:linear-gradient(360deg,rgba(0,45,103,0.6) 0%,rgba(5,16,42,0.6) 100%);
        border:1px solid rgba(27,158,234,0.6);
    }
    .keySearch_r_t_header{
        padding-left:32px;
        margin:20px 0 0 17px;
        background-image: url("~@/assets/images/phone_icon.png");
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position:0 0;
        height:24px;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:24px;

    }
    .keySearch_c_b_content{
        height:45px;
        margin:0 24px;
    }
    .keySearch_c_b_header{
        height:55px;
        padding-top:18px;
        line-height: 36px;
        text-align: center;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;

        background-image: url("~@/assets/images/keySearch_c_b_bg.png");
        background-repeat: no-repeat;
        background-size: 936px 54px;
        background-position:center 0;
    }
    .keySearch_c_b_body .common_table_body{
        top:48px;
    }
    .keySearch_c_b_body{
        margin-top:-1px;
        height:288px;
        position:relative;
    }
    .keySearch_c_b_tb_b{
        position:absolute;
        left:0;
        top:48px;
        bottom:0;
        right:0;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .keySearch_c_b_tb_h{
        height:48px;
        background:linear-gradient(90deg,rgba(0,45,103,1) 0%,rgba(5,16,42,1) 100%);
        border:1px solid rgba(27,158,234,1);
        position:absolute;
        left:0;
        top:0;
        right:0;
    }
    .keySearch_c_t_body{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .keySearch_l_b_header{
        padding-top:17px;
        padding-left:28px;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:24px;
    }
    .keySearch_l_b_body{
        position:absolute;
        top:57px;
        left:12px;
        right:12px;
    }
    .keySearch_l_b_num{
        position:absolute;
        left:66px;
        top:30px;
        font-size:24px;
        font-family:DINAlternate-Bold,DINAlternate;
        font-weight:bold;
        color:rgba(255,255,255,1);
        line-height:28px;
        width:60px;
        margin:0 auto;
    }
    .keySearch_l_b_num .d-roll-wrapper{
        margin:0 auto;
    }
    .keySearch_l_b_title{
        padding:12px 0 0 12px;
        font-size:14px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:18px;
    }
    .keySearch_l_b_label{
        position:absolute;
        bottom:14px;
        right:45px;
        font-size:14px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:rgba(255,255,255,1);
        line-height:18px;
    }
    .keySearch_l_b_item{
        width:190px;
        height:78px;
        background:rgba(27,158,234,0.2);
        border-left: 2px solid #09B5FE;
        margin:0 auto 24px auto;
        position:relative;
        overflow: hidden;
    }
    .keySearch_l_c_header{
        height:40px;
        background-image: url("~@/assets/images/keySearch_l_c_bg.png");
        background-repeat: no-repeat;
        background-size: 456px 40px;
        background-position:center 0;
        padding-left:86px;
        line-height: 40px;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
    }
    .keySearch_l_c_tb_b{
        position:absolute;
        left:0;
        top:48px;
        width:454px;
        bottom:0;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .keySearch_l_c_tb_h{
        width:454px;
        height:48px;
        background:linear-gradient(90deg,rgba(0,45,103,1) 0%,rgba(5,16,42,1) 100%);
        border:1px solid rgba(27,158,234,1);
        position:absolute;
        left:0;
        top:0;
        right:0;
    }
    .keySearch_l_c_body{
        position:relative;
        margin-top:-1px;
        height:288px;
        overflow: hidden;
    }
    .keySearch_l_t_header{
        height:40px;
        background-image: url("~@/assets/images/keySearch_l_t_bg.png");
        background-repeat: no-repeat;
        background-size: 307px 40px;
        background-position:center 0;
        text-align: center;
        font-size:22px;
        font-family:SourceHanSansSC-Bold,SourceHanSansSC;
        font-weight:bold;
        color:#BFE8FF;
        line-height:40px;
    }
    .keySearch_l_t_body{
        position:relative;
        margin-top:-1px;
        height: 288px;
        overflow: hidden;
    }
    .keySearch_l_t_tb_h{
        position:absolute;
        left:0;
        top:0;
        height:48px;
        right:0;
        background:linear-gradient(90deg,rgba(0,45,103,1) 0%,rgba(5,16,42,1) 100%);
        border:1px solid rgba(27,158,234,1);
    }
    .keySearch_l_t_tb_b{
        position:absolute;
        left:0;
        top:48px;
        right:0;
        bottom:0;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .keySearch_r_t{
        position: absolute;
        right:12px;
        top:105px;
        width:456px;
        height:360px;

        background-image: url("~@/assets/images/keySearch_r_t_bg.png");
        background-repeat: no-repeat;
        background-size: 456px 360px;
        background-position:0 0;
    }
    .keySearch_r_c{
        position: absolute;
        right:13px;
        top:489px;
        width:456px;
        height:220px;
        background:rgba(5,16,42,0.8);
        border:1px solid rgba(27,158,234,0.8);
    }
    .keySearch_r_b{
        position: absolute;
        right:12px;
        bottom:20px;
        width:456px;
        height:328px;
    }
    .keySearch_c_t{
        position: absolute;
        left:492px;
        top:160px;
        width:935px;
        height:526px;
    }
    .keySearch_c_b{
        position: absolute;
        left:492px;
        bottom:20px;
        width:935px;
        height:342px;
    }
    .keySearch_l_t{
        position: absolute;
        left:12px;
        top:106px;
        width:456px;
        height:328px;
    }
    .keySearch_l_c{
        position: absolute;
        left:12px;
        top:457px;
        width:456px;
        height:328px;
    }
    .keySearch_l_b{
        position: absolute;
        left:12px;
        bottom:20px;
        width:456px;
        height:253px;

        background-image: url("~@/assets/images/keySearch_l_b_bg.png");
        background-repeat: no-repeat;
        background-size: 456px 253px;
        background-position:0 0;
    }
    .page {
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background-image: url("~@/assets/images/home_bg.png");
        background-repeat: no-repeat;
        background-size: 1920px 1080px;
        background-position:0 0;
    }
    >>> .el-table, .el-table__expanded-cell{
        background:none;
    }
    >>> .el-table tr:hover{
        background:none;
    }
    >>> .el-table td, .el-table th.is-leaf{
        border:none;
    }
    >>> .el-table,>>>.el-table *{
        border:none;
    }
    >>> .el-table .cell{
        line-height: 28px;
        font-size:12px;
        color:#84D2FF;
    }

    >>> .el-table th>.cell{
        line-height:32px;
    }
    >>> .el-table .el-table__body tr:nth-child(even){
        background:rgba(50,63,98,0.2);
    }
</style>
<style>
    .el-table tbody tr:hover>td {
        background:rgba(50,63,98,0.3)!important;
    }
    .el-table td, .el-table th{
        padding:0;
    }

    .el-table th, .el-table tr{
        background: none;
    }
    .el-table::before{
        height:0;
    }

    .el-table *{
        border:none!important;
    }
</style>
